<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
.catList {
	background: #FFF;
	overflow: hidden;
}
.catList .swiper-slide {
	width: auto;
	padding: 0 0.8rem;
	color: #666;
	font-size: 0.6rem;
	line-height: 2rem;
	text-align: center;
	position: relative;
}
.catList .swiper-slide.active {
	color: #E73350;
}
.comFlowBox {
	padding: 0.75rem 0.5rem;
}
.comGodList .textBox {
	padding-top: 0;
}
.comGodList .title {
	padding: 0.5rem 0;
	box-sizing: content-box;
}
.comGodList .btmInfo {
	padding-top: 0;
}
</style>
</head>

<body class="bg-f5">
<div class="catList topFix">
	<div class="swiper-container">
		<div class="swiper-wrapper" id="cat_tab">
			<!-- <div class="swiper-slide active" tapmode onClick="changeCat(0);">推荐</div>
			<div class="swiper-slide" tapmode onClick="changeCat(1);">美妆个护</div>
			<div class="swiper-slide" tapmode onClick="changeCat(2);">食品饮料</div>
			<div class="swiper-slide" tapmode onClick="changeCat(3);">服饰箱包</div>
			<div class="swiper-slide" tapmode onClick="changeCat(4);">母婴玩具</div> -->
		</div>
	</div>
</div>
<script type="text/x-dot-template" id="cat_tpl">
	<div class="swiper-slide active" style="display:none" tapmode onClick="changeCat(0,this);">推荐</div>
	{{ for(var i in it) { }}
	<div class="swiper-slide" style="display:none" data-catId="{{= it[i].class_id }}" tapmode onClick="changeCat({{= parseInt(i)+1 }},this);">{{= it[i].class_name }}</div>
	{{ } }}
</script>
<div class="height-40"></div>
<div class="notData aui-hide aui-flex-row aui-flex-middle">
	<img src="../image/notdata/10.png" alt="">
	<div>没有找到相关文章</div>
</div>
<div class="comFlowBox">
	<div class="comGodList" id="flow_html" style="display:none">
		<div class="grid-sizer"></div>


	</div>

	<ul style="position:relative;top:-30px;" id="lists">
		<li style=" padding:12px 0 0; border-radius:12px;">
			<h3>每日任务说明</h3>
			<div style=" color:#999; border-bottom:#ccc 1px solid; padding:6px 0;" v-text="content">
				阿斯蒂芬叫阿三的激发就哈萨克贷记卡是放假咯回复卡号是的发货是靠近大海款到发货
			</div>
		</li>
		<li style="padding:12px 0 0;">
			<h3 style="margin-bottom:12px; border-bottom:#ccc 1px solid; padding-bottom:10px;">黄金任务</h3>
			<div style="display:flex; justify-content:splace-between">
				<dl style=" margin-bottom:12px; padding-right:6px; width:50%;" v-for="(item,index) in list" v-if="item.goods_vip==2" @click="share(item,2)">
					<dt style=" border:#ccc 1px solid; border-radius:4px; position:relative;">
						<img :src="item.pict_url" width="100%" style="height:150px;" />
						<!-- <div style="position:absolute;left:0; bottom:0;right:0;background:rgba(0,0,0,.7);color:#fff;padding:12px; text-align:center;" @click="share(item)">分享链接</div> -->
					</dt>
					<dd style=" padding-top:6px; color:#555;height:30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="item.title">固定推广连接</dd>
					<dd style="display: flex;justify-content: space-between; align-items:center;">
						<div>
							<strong v-text="'￥'+item.reserve_price" style="color:#f00"></strong>
							<p v-text="'佣金：'+item.data_amount"></p>
						</div>
						<div>
							立即分享
						</div>
					</dd>
				</dl>
				<dl style=" margin-bottom:12px;padding-left:6px; width:50%;"v-for="(item,index) in list" v-if="item.goods_suiji_type==2" @click="share(item,2)">
					<dt style=" border:#ccc 1px solid; border-radius:4px;">
						<img :src="item.pict_url" width="100%" style="height:150px;" />
					</dt>
					<dd style=" padding-top:6px; color:#555;height:30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="item.title">随机推广连接</dd>
					<dd style="display: flex;justify-content: space-between;align-items:center;">
						<div>
							<strong v-text="'￥'+item.reserve_price" style="color:#f00"></strong>
							<p v-text="'佣金：'+item.data_amount"></p>
						</div>
						<div>
							立即分享
						</div>
					</dd>
				</dl>
			</div>
		</li>

		<li style="padding:12px 0 0;">
			<h3 style="margin-bottom:12px; border-bottom:#ccc 1px solid; padding-bottom:10px;">铂金任务</h3>
			<div style="display:flex; justify-content:splace-between">
				<dl style=" margin-bottom:12px; padding-right:6px; width:50%;" v-for="(item,index) in list" v-if="item.goods_vip==3" @click="share(item,3)">
					<dt style=" border:#ccc 1px solid; border-radius:4px;">
						<img :src="item.pict_url" width="100%" style="height:150px;" />
					</dt>
					<dd style=" padding-top:6px; color:#555;height:30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="item.title">固定推广连接</dd>
					<dd style="display: flex;justify-content: space-between;align-items:center;">
						<div>
							<strong v-text="'￥'+item.reserve_price" style="color:#f00"></strong>
							<p v-text="'佣金：'+item.data_amount"></p>
						</div>
						<div>
							立即分享
						</div>
					</dd>
				</dl>
				<dl style=" margin-bottom:12px;padding-left:6px; width:50%;" v-for="(item,index) in list" v-if="item.goods_suiji_type==3" @click="share(item,3)">
					<dt style=" border:#ccc 1px solid; border-radius:4px;">
						<img :src="item.pict_url" width="100%" style="height:150px;" />
					</dt>
					<dd style=" padding-top:6px; color:#555;height:30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="item.title">随机推广连接</dd>
					<dd style="display: flex;justify-content: space-between;align-items:center;">
						<div>
							<strong v-text="'￥'+item.reserve_price" style="color:#f00"></strong>
							<p v-text="'佣金：'+item.data_amount"></p>
						</div>
						<div>
							立即分享
						</div>
					</dd>
				</dl>
			</div>
		</li>

		<li style="padding:12px 0 0;">
			<h3 style="margin-bottom:12px; border-bottom:#ccc 1px solid; padding-bottom:10px;">钻石任务</h3>
			<div style="display:flex; justify-content:splace-between">
				<dl style=" margin-bottom:12px; padding-right:6px; width:50%;" v-for="(item,index) in list" v-if="item.goods_vip==4" @click="share(item,4)">
					<dt style=" border:#ccc 1px solid; border-radius:4px;">
						<img :src="item.pict_url" width="100%" style="width:150px;height:150px;" />
					</dt>
					<dd style=" padding-top:6px; color:#555; height:30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="item.title">固定推广连接</dd>
					<dd style="display: flex;justify-content: space-between;align-items:center;">
						<div>
							<strong v-text="'￥'+item.reserve_price" style="color:#f00"></strong>
							<p v-text="'佣金：'+item.data_amount"></p>
						</div>
						<div>
							立即分享
						</div>
					</dd>
				</dl>
				<dl style=" margin-bottom:12px;padding-left:6px; width:50%;" v-for="(item,index) in list" v-if="item.goods_suiji_type==4" @click="share(item,4)">
					<dt style=" border:#ccc 1px solid; border-radius:4px;">
						<img :src="item.pict_url" width="100%" style="width:150px; height:150px;" />
					</dt>
					<dd style=" padding-top:6px; color:#555; height:30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="item.title">随机推广连接</dd>
					<dd style="display: flex;justify-content: space-between;align-items:center;">
						<div>
							<strong v-text="'￥'+item.reserve_price" style="color:#f00"></strong>
							<p v-text="'佣金：'+item.data_amount"></p>
						</div>
						<div>
							立即分享
						</div>
					</dd>
				</dl>
			</div>
		</li>


	</ul>
			<!-- <input id="foo" type="text" value="" />
			<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">复制分享链接</button> -->
</div>
<script type="text/x-dot-template" id="flow_tpl">
{{ for(var i in it){ }}
<div class="item" id="post_{{= it[i].article_id}}" data-id="{{=it[i].article_id}}" data-userid="{{=it[i].article_userid}}">
	<div class="inner">
		<div class="photo" tapmode onClick="openPostDetail({{=it[i].article_id}})"><img src="{{=it[i].article_cover}}" alt=""></div>
		<div class="textBox">
			<div class="title aui-flex-col aui-flex-middle" tapmode onClick="openPostDetail({{=it[i].article_id}})">
				<div class="aui-ellipsis-2">{{=it[i].article_content}}</div>
			</div>
			<div class="btmInfo aui-flex-col aui-flex-middle aui-flex-between">
				<div><div class="avatar"><img src="{{=it[i].user_avatar}}" alt=""></div></div>
				<div class="flex-auto name aui-ellipsis-1">{{=it[i].user_nickname || ''}}</div>
				<div class="like {{= it[i].is_like == 1 ? 'on' : '' }}" tapmode onClick="togLike(this)">{{=it[i].like_count || '0'}}</div>
				</div>
		</div>
	</div>
</div>
{{ } }}
</script>

</body>
<script type="text/javascript" src="../script/clipboard.js"></script>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../script/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>

<script type="text/javascript">
	var catSwiper;
	var gridDom = '#flow_html';
	var grid;
	var isLoading = false;
  var loadFlag = true;
  var pageSize = 50;
  var currentPage = 1;
	var num = 0;
	var listDom;
    apiready = function() {
        api.parseTapmode();

		//调用瀑布流
		grid = new Masonry( gridDom, {
			columnWidth: '.grid-sizer',
			itemSelector: '.item',
			percentPosition: true
		});
		imagesLoaded( gridDom, function() {
			grid.layout();
		});

		// 监听到达底部
		api.addEventListener({
		  name:'scrolltobottom',
		  extra:{
			  threshold: 0
		  }
		}, function(ret, err){
			if(isLoading) return;
			if(loadFlag){
				changeCat(num,listDom)
			}
		});
		//文章列表刷新
		api.addEventListener({
			name: 'postListUpdateEvent'
		}, function(ret, err){
			refresh();
		});

	function copy(){	}
		var clipboard = new Clipboard('.btn');

		clipboard.on('success', function(e) {
				console.log(JSON.stringify(e));
		});

		clipboard.on('error', function(e) {
			console.log(2)
				console.log(e);
		});


		//获取商品
		var vm = new Vue({
			el:'#lists',
			data:{
				list:[],
				content:'',
				userInfo:{}
			},
			created(){
				let _this = this
				this.getData()

			},
			mounted(){
				let _this = this
				console.log(getUserinfo().userid)
				// api.getPrefs({
				// 		key: 'userInfo'
				// }, function(ret, err) {
				// 	console.log(JSON.stringify(ret.value))
				// 	_this.userInfo = JSON.parse(ret.value)
				//
				// });
			 	_this.userInfo = getUserinfo()
			},
			methods:{
				getData(){
					let _this = this
					api.ajax({
					    url: BASE_URL + 'app/select/bptask',
					    method: 'post',
					    data: {}
					},function(ret, err){
						// console.log(JSON.stringify(ret))
							_this.list = ret.task
							_this.content = ret.content
					    // if (ret && ret.code == 1) {
							// 	var tpl = $$('#cat_tpl').html();
							// 	var tempFn = doT.template(tpl);
							// 	$$('#cat_tab').html(tempFn(ret.data));
							// 	api.parseTapmode();
							// 	sliderInit();
					    // } else {
					    //     toast(ret.msg)
					    // }
					});
				},
				toDetail(godId,item,img){
					api.openWin({
						name: 'product_detail_win0',
						url: 'widget://html/best/product_detail_win0.html',
						pageParam: {
							shopId: godId,
							item:item,
							img:img
						}
					});
				},
				share(item,type){
					// alert(JSON.stringify(item))

					let _this = this
					// console.log(JSON.stringify(_this.userInfo))
					if(parseInt(_this.userInfo.user_vip) !=item.vip) {
						//console.log(parseInt(_this.userInfo.user_vip));
						toast('级别不匹配!')
						return
					}
					// api.ajax({
					//     url: BASE_URL + 'app/user/makesharelist',
					//     method: 'post',
					//     data: {
					//         values: {
					//             userid: _this.userInfo.userid,
					// 						ordertype:1,
					// 						orderid:item.num_iid
					//         }
					//     }
					// },function(ret, err){
					// });
					api.ajax({
							url: BASE_URL + 'app/select/shareImg',
							method: 'post',
							data: {
									values: {
											pict_url:item.pict_url,
											title: item.title,
											price:item.coupon_amount,
											original_price:item.reserve_price,
											coupon_price:item.coupon_info,
											user_nickname: _this.userInfo.user_nickname,
											coupon_share_url:item.coupon_share_url,
											type:2
											// type:item.user_type
									}
							}
					},function(ret, err){
						// console.log(JSON.stringify(ret))
						// api.ajax({
						//     url: BASE_URL + 'app/select/modelGenerate',
						//     method: 'post',
						//     data: {
						//         values: {
						//             coupon_share_url : item.coupon_share_url,
						// 						pict_url:item.pict_url,
						// 						user_nickname: _this.userInfo.user_nickname,
						// 						shot_title:item.title,
						// 						userid:_this.userInfo.userid,
						// 						ordertype:3
						//         }
						//     }
						// },function(ret, err){
						// 	console.log(JSON.stringify(ret))
						// 	_this.toDetail(item.num_iid,item,ret.img)
						// });
							_this.toDetail(item.num_iid,item,ret.img)
					});

					return
					$api.val($api.byId('foo'),item.goods_url);
					copy()
				}
			}
		})


		changeCat(num)
		// 分类
		api.ajax({
		    url: BASE_URL + 'App/Article/classifyList',
		    method: 'post',
		    data: {}
		},function(ret, err){
		    if (ret && ret.code == 1) {
					var tpl = $$('#cat_tpl').html();
					var tempFn = doT.template(tpl);
					$$('#cat_tab').html(tempFn(ret.data));
					api.parseTapmode();
					sliderInit();
		    } else {
		        toast(ret.msg)
		    }
		});

		//监听点赞
		api.addEventListener({
			name: 'postLikeEvent'
		}, function(ret, err){
			if(ret.value.id){
				var dom = $$('#post_'+ ret.value.id).find('.like');
				if(dom.length){
					if(ret.value.is_like == 1){
						dom.addClass('on');
					}else{
						dom.removeClass('on');
					}
					dom.text(ret.value.like_count);
				}
			}
		});

		//下拉刷新
		api.setCustomRefreshHeaderInfo({
			bgColor: '#f5f5f5',
			isScale: false,
			loadAnimInterval: 200,
			image: refreshHeader_img
		}, function(ret) {
			refresh();
		});

	};
	//刷新页面
	function refresh(){
		currentPage = 1;
		if(listDom){
			changeCat(num,listDom)
		}else{
			changeCat(num)
		}
	}
	//顶部分类滑动
	function sliderInit() {
		catSwiper = new Swiper('.catList .swiper-container', {
			freeMode: true,
			slidesPerView: 'auto',
			freeModeSticky: true
		});
	}
	//点击切换分类
	function changeCat(n,el){
		$$('.catList .swiper-slide').removeClass('active').eq(n).addClass('active');
		var _this = $$(el);
		listDom = el;
		var id = _this.data('catId');
		if(num != n){
			num = n;
			currentPage = 1;
		}
			showProgress();
			isLoading = true;
			api.ajax({
					url: BASE_URL + 'App/Article/articleList',
					method: 'post',
					data: {
							values: {
								userid: getUserId(),
								recommend: n,
								pageNo: currentPage,
								pageSize: pageSize,
								classify: id
							},
					}
			},function(ret, err){
					if (ret) {
						if(ret.code == 1 && ret.data.length > 0){
								$$('.notData').addClass('aui-hide');
								$$('#flow_html').removeClass('aui-hide');
								getFlow(ret.data);
								currentPage++;
								api.parseTapmode();
								//如果加载出来的数量 小于 pagesize 说明到底线了
								if(ret.data.length < pageSize){
										loadFlag = false;
								}
							}else{
								if(currentPage == 1){
										$$('#flow_html').addClass('aui-hide');
										$$('.notData').removeClass('aui-hide');
								}
								loadFlag = false;
							}
					}
					isLoading = false;
					hideProgress();
					api.refreshHeaderLoadDone();
			});
	}
	//瀑布流
	function getFlow(flowData) {
		var tpl = $$('#flow_tpl').html();
		var tempFn = doT.template(tpl);
		var elem = $$(tempFn(flowData));
		if( currentPage==1 ){
			$$('#flow_html').html('<div class="grid-sizer"></div>');
		}
		$$(gridDom).append(elem);
		grid.appended(elem);
		imagesLoaded(gridDom, function() {
			grid.layout();
		});

		api.parseTapmode();
	}
	//喜欢 不喜欢切换
	function togLike(el){
		var _this = $$(el);
		var item = _this.parents('.item');
		var itemId = item.data('id');
		var userId = item.data('userid');
		var count = parseInt(_this.html());
		api.ajax({
				url: BASE_URL + 'App/Article/articleLike',
				method: 'post',
				data: {
						values: {
							userid: getUserId(),
							article_id: itemId,
							article_userid: userId
						}
				}
		},function(ret, err){
				if (ret) {
						if(ret.code == 1){
							if(ret.msg == '点赞成功'){
								_this.addClass('on');
								count+=1;
								_this.html(count);
							}else{
								_this.removeClass('on');
								count-=1;
								_this.html(count);
							}
							toast(ret.msg)
						}
				}else{
					toast(ret.msg)
				}
		});
	}

</script>
</html>
